<section>
  <h1>
    Menu 导航菜单
  </h1>
  <hr>
  <p>导航菜单一般分为顶部导航和侧边导航，是为页面提供导航功能的菜单列表</p>
  <doc-section [title]="'顶部导航'" [code]="topMenu">
    <p desc>顶部导航需要设置&nbsp;<code>mode=&quot;horizontal&quot;</code></p>
    <div sample>
      <app-demo-top-menu>
      </app-demo-top-menu>
    </div>
  </doc-section>

  <doc-section [title]="'多级导航'" [code]="topMenu">
    <p desc>可以在&nbsp;<code>atSubmenu</code>&nbsp;中嵌套&nbsp;<code>atSubmenu</code>&nbsp;组合成多级菜单</p>
    <div sample>
      <app-demo-top-menu>
      </app-demo-top-menu>
    </div>
  </doc-section>
  <doc-section [title]="'侧边导航（多级菜单）'" [code]="verticalMenu">
    <div sample>
      <app-demo-vertical-menu></app-demo-vertical-menu>
    </div>
  </doc-section>

  <doc-section [title]="'内置导航'" [code]="inlineMenu">
    <p desc> 导航菜单默认&nbsp;<code>atType=&quot;inline&quot;</code>,并且itemGroup 外层需要多包裹一层 inlineMenu</p>
    <div sample>
      <app-demo-inline-menu></app-demo-inline-menu>
    </div>
  </doc-section>

  <doc-section [title]="'参数说明'" [sample]="false">
    <table desc class="table">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>可选值</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>atMenuType</td>
        <td>导航菜单的模式</td>
        <td>String</td>
        <td><code>inline</code>,&nbsp;<code>horizontal</code>,&nbsp;<code>vertical</code></td>
        <td><code>inline</code></td>
      </tr>
      <tr>
        <td>atMenuType</td>
        <td>导航菜单的主题</td>
        <td>String</td>
        <td><code>light</code>,&nbsp;<code>dark</code></td>
        <td><code>light</code></td>
      </tr>
      </tbody>
    </table>

  </doc-section>

  <doc-section [title]="'atSubMenu参数'" [sample]="false">
    <table desc class="table">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>可选值</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>isOpen</td>
        <td>是否打开</td>
        <td>Boolean</td>
        <td>-</td>
        <td>false</td>
      </tr>
      </tbody>
    </table>
  </doc-section>

</section>
